<template>
  <div class="login-container">
    <!-- logo区域 -->
    <div class="logo">
      <img alt="" src="@/assets/logo.png">
    </div>

    <!-- 登录表单区域 -->
    <el-form :model="user" :rules="userRules" class="loginform_style" label-width="0px" ref="userForm">
      <el-form-item prop="phone">
        <el-input placeholder="输入您的手机号" prefix-icon="el-icon-user-solid" v-model="user.phone"></el-input>
      </el-form-item>
      <el-form-item prop="code">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-input placeholder="输入您的验证码" prefix-icon="el-icon-lock"  v-model="user.code"></el-input>
          </el-col>
          <el-col :span="12">
            <el-button @click="sendCode" :disabled="isDis" type="primary">{{btnMsg}}</el-button>
          </el-col>
        </el-row>


      </el-form-item>
      <el-form-item class="btns">
        <el-button @click="login" type="primary">登录</el-button>
        <el-button @click="" type="info">重置</el-button>
      </el-form-item>
    </el-form>


  </div>
</template>

<script>
    export default {
        name: "Login",
      data(){
          return{
            isDis:false,
            btnMsg:"发送验证码",
            totalTime:60,
            user:{
              phone:'',
              code:'',
            },
            userRules:{
              phone:[
                {required:true,message:'请输入手机号',trigger:'blur'},
                {pattern:/^1[3|4|5|7|8][0-9]{9}$/,message: '请输入正确的手机格式',trigger: 'blur'}
              ],
              code:[
                {required:true,message:'请输入验证码',trigger:'blur'},
                {min:6,max:6,message: '请输入6位',trigger: 'blur'}
              ]
            }
          }
      },
      methods:{
        sendCode:function () {
          if(!/^1[3|4|5|7|8][0-9]{9}$/.test(this.user.phone)){
            this.$message.error("手机号有误");
            return
          }
          this.$http.get("user/send/"+this.user.phone).then((res)=>{
            if(res.data.success){
              alert(res.data.message);
            }else{
              alert(res.data.success);
            }
          })
          let vi=window.setInterval((res)=>{
            var time=this.totalTime--;
            this.btnMsg=time+"秒后发送";
            this.isDis=true;
            if(time<=0){
              window.clearInterval(vi);
              this.totalTime=60;
              this.btnMsg="发送验证码";
              this.isDis=false;
            }
          },1000);
        },
        login:function () {
            this.$http.post("/user/login",this.user).then((res)=>{
              if(res.data.success){
                sessionStorage.setItem("user",JSON.stringify(res.data.result.user));
                sessionStorage.setItem("token",res.data.result.token);
                this.$router.push("/list");
                this.$message.success(res.data.message);
              }else{
                this.$message.error(res.data.message);
              }
            })
        }
      }
    }
</script>

<style lang="less" scoped>
  .login-container {
    width: 450px;
    height: 314px;
    background-color: #fff;
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 5px;

    .logo {
      width: 130px;
      height: 130px;
      border: 1px solid #eee;
      border-radius: 50%;
      padding: 8px;
      box-shadow: 0 0 10px #eee;
      position: absolute;
      left: 50%;
      transform: translateX(-50%) translateY(-60px);
      background-color: #fff;

      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #eee;
      }
    }

    .loginform_style {
      padding: 0 20px;
      margin-top: 110px;
    }

    .btns {
      display: flex;
      justify-content: center;
    }
  }

</style>
